<template>
	<view>
		<view class="cu-form-group margin-top">
			<view class="title">题目名称</view>
			<input v-model="tikuForm.question_name" placeholder="请输入" name="input" />
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">题目类型</view>
			<picker @change="PickerChange" :value="LeixingIndex" :range="picker">
				<view class="picker">
					{{ LeixingIndex > -1 ? picker[LeixingIndex] : '请选择类型' }}
				</view>
			</picker>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">章节</view>
			<picker @change="PickerChangezj" :value="zjIndex" :range="unit_list" range-key="name">
				<view class="picker">
					{{ zjIndex > -1 ? unit_list[zjIndex].name : '请选择章节' }}
				</view>
			</picker>
		</view>
		<radio-group v-if="LeixingIndex == 2" class="block" @change="RadioChangePd">
			<view class="cu-form-group margin-top">
				<view class=""
					style="display: flex;flex-direction: column;width: 100%;height: 70px;border-bottom: 1px solid #eee;margin-top: 20rpx;">
					<view class="title">正确答案（判断题）</view>
					<view class="" style="display: flex;justify-content: space-around;width: 60%;align-items: center;">
						正确:<radio :class="radio == '1' ? 'checked' : ''" :checked="radio == '1' ? true : false" value="1">
						</radio>
						错误:<radio :class="radio == '0' ? 'checked' : ''" :checked="radio == '0' ? true : false" value="0">
						</radio>
					</view>
				</view>
			</view>

		</radio-group>
		<checkbox-group v-if="LeixingIndex == 1" class="block" @change="CheckboxChange">
			<view class="cu-form-group margin-top">
				<view class=""
					style="display: flex;flex-direction: column;width: 100%;height: 70px;border-bottom: 1px solid #eee;margin-top: 20rpx;">
					<view class="title">正确答案（多选）</view>
					<view style="display: flex;justify-content: space-around;align-items: center;">
						A:<checkbox :class="checkbox[0].checked ? 'checked' : ''" :checked="checkbox[0].checked ? true : false"
							value="A"></checkbox>
						B:<checkbox :class="checkbox[1].checked ? 'checked' : ''" :checked="checkbox[1].checked ? true : false"
							value="B"></checkbox>
						C:<checkbox :class="checkbox[2].checked ? 'checked' : ''" :checked="checkbox[2].checked ? true : false"
							value="C"></checkbox>
						D:<checkbox :class="checkbox[3].checked ? 'checked' : ''" :checked="checkbox[3].checked ? true : false"
							value="D"></checkbox>
						E:<checkbox :class="checkbox[4].checked ? 'checked' : ''" :checked="checkbox[4].checked ? true : false"
							value="E"></checkbox>
						F:<checkbox :class="checkbox[5].checked ? 'checked' : ''" :checked="checkbox[5].checked ? true : false"
							value="F"></checkbox>

					</view>
				</view>
			</view>

		</checkbox-group>
		<radio-group v-if="LeixingIndex == 0" class="block" @change="RadioChange">
			<view class="cu-form-group margin-top">
				<view class=""
					style="display: flex;flex-direction: column;width: 100%;height: 70px;border-bottom: 1px solid #eee;margin-top: 20rpx;">
					<view class="title">正确答案（单选）</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;">
						A:<radio :class="radio == 'A' ? 'checked' : ''" :checked="radio == 'A' ? true : false" value="A">
						</radio>
						B:<radio :class="radio == 'B' ? 'checked' : ''" :checked="radio == 'B' ? true : false" value="B">
						</radio>
						C:<radio :class="radio == 'C' ? 'checked' : ''" :checked="radio == 'C' ? true : false" value="C">
						</radio>
						D:<radio :class="radio == 'D' ? 'checked' : ''" :checked="radio == 'D' ? true : false" value="D">
						</radio>
						E:<radio :class="radio == 'E' ? 'checked' : ''" :checked="radio == 'E' ? true : false" value="E">
						</radio>
						F:<radio :class="radio == 'F' ? 'checked' : ''" :checked="radio == 'F' ? true : false" value="F">
						</radio>
					</view>
				</view>
			</view>

		</radio-group>
		<view class="cu-form-group align-start">
			<view class="title">A：</view>
			<textarea maxlength="-1" v-model="tikuForm.A" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">B：</view>
			<textarea maxlength="-1" v-model="tikuForm.B" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">C：</view>
			<textarea maxlength="-1" v-model="tikuForm.C" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">D：</view>
			<textarea maxlength="-1" v-model="tikuForm.D" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">E：</view>
			<textarea maxlength="-1" v-model="tikuForm.E" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">F：</view>
			<textarea maxlength="-1" v-model="tikuForm.F" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>



		<view class="cu-form-group align-start">
			<view class="title">解析：</view>
			<textarea maxlength="-1" v-model="tikuForm.area" :disabled="modalName != null" @input="textareaBInput"
				placeholder="请输入答案"></textarea>
		</view>
		<view class=""
			style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 20px;height: 100px;background-color: #fff;">
			<button class="cu-btn bg-green" @tap="uploadTiku">提交</button>
			<button class="cu-btn" @tap="resetForm">重置</button>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex';
export default {
	data() {
		return {
			subject2Id: '',
			checkbox: [{
				value: 'A',
				checked: false
			}, {
				value: 'B',
				checked: false
			}, {
				value: 'C',
				checked: false
			},
			{
				value: 'D',
				checked: false
			},
			{
				value: 'E',
				checked: false
			},
			{
				value: 'F',
				checked: false
			}

			],
			tikuForm: {
				question_name: '',
				subject_id: '',
				unit_id: '',
				type: '',
				right_answer_panduan: '',
				right_answer_danxuan: '',
				right_answer_duoxuan: '',
				A: '',
				B: '',
				C: '',
				D: '',
				E: '',
				F: '',
				area: ''
			},
			unit_list: [],
			radio: '',
			picker: ['单选题', '多选题', '判断题'],
			LeixingIndex: 0,
			zjIndex: 0,
		};
	},
	onLoad(query) {
		// 从 query 中获取传递的参数
		this.subject2Id = query.subject_id || '';
		console.log('%c [ this.subject2Id ]-155', 'font-size:13px; background:pink; color:#bf2c9f;', this.subject2Id)
		this.get_tiku_list()

	},
	computed: {
		...mapState(['subject2', 'subjectVip', 'userinfo']),
	},
	methods: {
		// 重置 form
		resetForm() {
			this.tikuForm = {
				question_name: '',
				subject_id: '',
				unit_id: '',
				type: '',
				right_answer_panduan: '',
				right_answer_danxuan: '',
				right_answer_duoxuan: '',
				A: '',
				B: '',
				C: '',
				D: '',
				E: '',
				F: '',
				area: ''
			}
		},
		// 章节列表
		async get_tiku_list() {
			let needLogin = false
			if (this.userinfo.token) {
				needLogin = true
			}
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.unitList,
				data: {
					subject_id: this.subject2Id,
					unit_id: 0,
					page: 1,
					limit: 4
				},
				needLogin: needLogin
			});
			if (res.code === 1) {
				this.unit_list = res.data.data;
				console.log('%c [ this.unit_list ]-178', 'font-size:13px; background:pink; color:#bf2c9f;', this.unit_list)

			}
		},
		async uploadTiku() {
			// 上传unit_id
			this.tikuForm.unit_id = this.unit_list[this.zjIndex].id
			// 上传题目类型
			this.tikuForm.type = Number(this.LeixingIndex) + 1
			let res = await this.$myHttp.post({

				url: this.$myHttp.urlMap.uploadTiku,
				data: this.tikuForm
			})
			
			if (res.code === 1) {
				uni.showToast({
					title: '上传成功',
					icon: 'none'
				})
				// 等待1秒后跳转
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
				this.resetForm()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		},

		CheckboxChange(e) {
			var items = this.checkbox;

			var values = e.detail.value;
			this.tikuForm.right_answer_duoxuan = values.join(',')

			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				items[i].checked = false;
				for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
					if (items[i].value == values[j]) {
						items[i].checked = true;
						break
					}
				}
			}
		},
		PickerChangezj(e) {
			this.zjIndex = e.detail.value
			console.log('%c [ this.tikuForm.type ]-185', 'font-size:13px; background:pink; color:#bf2c9f;', this.tikuForm.unit_id)

		},
		PickerChange(e) {
			this.LeixingIndex = e.detail.value
			console.log('%c [ this.tikuForm.type ]-185', 'font-size:13px; background:pink; color:#bf2c9f;', this.tikuForm.type)

		},
		RadioChangePd(e) {
			this.radio = e.detail.value
			this.tikuForm.right_answer_panduan = this.radio
			console.log('%c [ this.radio ]-160', 'font-size:13px; background:pink; color:#bf2c9f;', this.radio)
		},
		RadioChange(e) {
			this.radio = e.detail.value
			this.tikuForm.right_answer_danxuan = this.radio
			console.log('%c [ this.radio ]-164', 'font-size:13px; background:pink; color:#bf2c9f;', this.radio)
		},
		textareaBInput(e) {
			this.textareaBValue = e.detail.value
		}
	}
}
</script>

<style lang="scss"></style>